<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小飞笔记-博客系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/static/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/static/css/bootstrap.css" type="text/css">
    <script src="/static/js/jquery-3.7.1.min.js"></script>
    
    <style>
        body{
            margin: 0;
            background-color: #eeeeee;
            font-size: 16px;
            font-family: "微软雅黑","幼圆", "宋体", sans-serif;
        }
        @media (max-width: 1200px) {
            .container{
                max-width: 1300px;
            }
        }
        .header{
            border-top: 3px solid black;
            border-radius: 0px;
        }
        div{
            border-radius: 5px;
        }
        label{
            font-weight: bold;
        }
        a:link, a:visited{
            text-decoration: none;
            color:#337ab7;
        }
        a:hover{
            text-decoration: none;
            color:#e56244;
        }
        .menu{
            width: 100%;
            margin-bottom: 10px;
            border-top: solid 2px orangered;
            background-color: #563d7c;
        }
        .menu .menu-bar a:link{
            color:whitesmoke;
        }
        
    </style>
    
</head>
<body>
    <div class="header">
        <div class="container" style="padding-top: 0px 10px 0px 0px;">
            <div class="row">
                <div class="col-sm-4 col-4" style="margin: 10px 0px;">
                    <a href="/">
                        <img src="/static/images/logo.png" alt="小飞笔记" style="width: 100px; height: 30px;">
                    </a>
                </div>
                <!-- 仅在sm及以上设备中显示 -->
                <div class="col-sm-8 col-8 d-none d-sm-block" 
                style="text-align: right; padding: 20px;">
                    <h2>以小飞之名，行学习之实</h2>
                </div>
                <!-- 仅在移动端显示 -->
                <div class="col-sm-8 col-8 d-sm-none" 
                style="text-align: right; padding: 20px;">
                    <h3 style="color: midnightblue;">小飞博客</h2>
                </div>
        </div>
    </div>
    <div class="menu">
        <div class="container" style="padding: 0px;">
            <nav class="navbar navbar-expand-lg navbar-dark menu-bar"
                style="background-color: #563d7c;">
                <a href="#" class="navbar-brand">快捷导航</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" 
                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav">
                        <a href="#" class="nav-item nav-link">首页</a>
                        <a href="#" class="nav-item nav-link">文章</a>
                        <a href="#" class="nav-item nav-link">关于</a>
                    </div>
                    <div class="navbar-nav ml-auto">
                        <a href="#" class="nav-item nav-link">登录</a>
                        <a href="#" class="nav-item nav-link">注册</a>
                        <a href="#" class="nav-item nav-link">用户中心</a>
                    </div>
                </div>
            </nav>

        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-sm-9 col-12" style="padding: 0 10px;" id="left">
                <!-- 放置轮播图 -->
                <div class="col-12" style="height: 250px;border: solid 2px red;">
                    <div id="carouselExampleIndicators" class="col-12 carousel slide"
                        data-ride="carousel" style="padding: 0PX;">
                        <ol class="carousel-indicators">
                            <li data-target="#carouselExampleIndicators" data-slide-to="0"
                                class="active"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="1"
                               ></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="2"
                               ></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="/static/images/banner-1.png"  class="d-block w-100"  alt="" srcset="">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/images/banner-2.png"  class="d-block w-100"  alt="" srcset="">
                            </div>
                            <div class="carousel-item">
                                <img src="/static/images/banner-3.png"  class="d-block w-100"  alt="" srcset="">
                            </div>
                        </div>
                        <a class="carousel-control-prev"   href="#carouselExampleIndicators" 
                            role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next"   href="#carouselExampleIndicators" 
                            role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
                <div class="col-12" style="height: 120px;border: solid 2px red;margin: 10px 0;">
                    这里放置文章摘要
                </div>
                <div class="col-12" style="height: 120px;border: solid 2px red;margin: 10px 0;">
                    这里放置文章摘要
                </div>
                <div class="col-12" style="height: 120px;border: solid 2px red;margin: 10px 0;">
                    这里放置文章摘要
                </div>
                <div class="col-12" style="height: 120px;border: solid 2px red;margin: 10px 0;">
                    这里放置文章摘要
                </div>
            </div>
            <div class="col-sm-3 col-12" style="padding: 0 10px;" id="side">
                <div class="col-12" style="height: 60px;border: solid 2px red;">文章搜索栏</div>
                <div class="col-12" style="height: 340px;border: solid 2px red;">文章推荐栏</div>
                <div class="col-12" style="height: 350px;border: solid 2px red;">文章推荐栏</div>
            </div>
        </div>
    </div>


    <div style="margin-bottom: 10px;border-top: solid 2px orangered;">
        <div class="container">
            
        </div>
    </div>
</body>
</html>